<template>
  <div class="hamburger" @click="toggleClick">
    <div :class="{ 'is-active': isActive }">
      <i class="el-icon-arrow-right" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.hamburger {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(calc(-50% - 40px));
  cursor: pointer;
  :hover {
    opacity: 0.8;
  }
  div {
    position: relative;
    width: 14px;
    height: 60px;
    line-height: 60px;
    background: #bfc1c3;
    color: #fff;
    i {
      width: 14px;
    }
    &::before {
      position: absolute;
      content: '';
      top: -14px;
      width: 0;
      height: 0;
      border: 7px solid transparent;
      border-left-color: #bfc1c3;
      border-bottom-color: #bfc1c3;
    }
    &::after {
      position: absolute;
      content: '';
      left: 0;
      top: 60px;
      width: 0;
      height: 0;
      border: 7px solid transparent;
      border-left-color: #bfc1c3;
      border-top-color: #bfc1c3;
    }
  }
}

.hamburger .is-active i {
  transform: rotate(180deg);
}
</style>
